<template>
	<view class="content font_family">
		<view class="top f_j">
			<u-avatar size="140rpx" :src="user_info.avatar" mode="aspectFill"></u-avatar>
			<view class="msg">
				<view class="name">
					{{user_info.username}}
				</view>
				<view class="num">
					<text>评价数：</text>
					<text>{{user_info.comment_nums}}</text>
				</view>
			</view>
		</view>
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="user f_z_b f_j">
				<view class="left f_j">
					<u-avatar size="72rpx" :src="item.avatar" mode="aspectFill"></u-avatar>
					<view class="name">
						<view class="text">
							{{item.username}}
						</view>
						<u-rate count="5" v-model="item.score" readonly size='22rpx'></u-rate>
					</view>
				</view>
				<view class="right">
					{{item.createtime}} 评价
				</view>
			</view>
			<view class="sp_msg f">
				<image :src="item.goods_image" mode="aspectFill"></image>
				<view class="sp_detail f_z_b">
					<view class="left f_z_b f_d">
						<view class="sp_title text_ellipsis2">
							{{item.goods_title}}
						</view>
						<view class="sp_gg">
							规格 {{item.item_name}}
						</view>
					</view>
					<view class="right f_d">
						<view class="">
							￥{{item.goods_price}}
						</view>
						<view class="num">
							x1
						</view>
					</view>
				</view>
			</view>
			<view class="pl_text">
				<text class="pl_title">评价内容：</text>
				<text>{{item.content}}</text>
			</view>
			<view class="btn f_z_b">
				<view class="left f_j" @click="open(item.id,index)">
					<image src="../../static/public/pl.png" mode=""></image>
					<view class="num">
						{{item.hf_nums}}
					</view>
				</view>
				<view class="right" @click="delete_pl(item.id)">
					删除评价
				</view>
			</view>
		</view>
		<u-empty v-if="list.length==0" text='还没有评价哦~' icon="/static/public/kong.png">
		</u-empty>
		<!-- 评论弹出框 -->
		<u-popup round='40rpx' :show="comment_show" @close="close">
			<scroll-view class="comment_box" scroll-y="true" @scrolltolower='scrolltolower'>
				<comment v-for="(item,index) in hf_list" @user_reply='user_reply' :key="index" :msg='item'></comment>
				<view class="empty_top" v-if="hf_list.length==0">
					<u-empty text='快来分享你的评论吧~' icon="/static/public/kong.png">
					</u-empty>
				</view>
			</scroll-view>
			<!-- 回复框 -->
			<view class="bottom f_zj">
				<view class="ipt_box f_j">
					<image class="img" src="../../static/public/set.png" mode=""></image>
					<u--input :placeholder="placeholder" border="none" v-model="reply_data.content"
						@confirm="confirm"></u--input>
				</view>
			</view>
			<u-toast ref="uToast" position='top'></u-toast>
		</u-popup>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import { commentList, getReply, replyComment, delComment } from '@/api/user.js'
	export default {
		computed: {
			...mapState(['user_info', 'dl_id'])
		},
		data() {
			return {
				comment_show: false,
				query_data: {
					dl: '',
					page: 1,
				},
				hf_data: {
					dl: '',
					comment_id: '',
					page: 1
				},
				list: [],
				more: 'loadmore',
				hf_list: [],
				hf_more: 'loadmore',
				reply_data: {
					dl: '',
					comment_id: '',
					content: '',
					p_id: '',
				},
				placeholder: '文明用语',
				open_pl: '', //当前打开的评论index
			};
		},
		onLoad() {
			this.get_user()
			this.get_list()
		},
		onReachBottom() {
			if (this.more == 'loadmore') {
				this.get_list()
			}
		},
		methods: {
			...mapActions(['get_user']),
			open(id, index) {
				this.open_pl = index
				this.hf_data.page = 1
				this.hf_list = []
				this.hf_data.comment_id = id
				this.comment_show = true
				this.reply_data.dl = this.dl_id
				this.reply_data.comment_id = id
				this.reply_data.p_id = id
				this.get_hf()
			},
			close() {
				this.hf_data.comment_id = ''
				this.comment_show = false
			},
			//获取评论
			get_list() {
				this.query_data.dl = this.dl_id
				commentList(this.query_data).then(res => {
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.list = [...this.list, ...res.data.data]
							this.query_data.page += 1
							this.more = 'loadmore'
						} else {
							this.more = 'nomore'
						}
					}
				})
			},
			// 获取回复
			get_hf() {
				getReply(this.hf_data).then(res => {
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.hf_list = [...this.hf_list, ...res.data.data]
							this.hf_more = 'loadmore'
							this.hf_data.page += 1
						} else {
							this.hf_more = 'nomore'
						}
					}
				})
			},
			scrolltolower() {
				if (this.hf_more == 'loadmore') {
					this.get_hf()
				}
			},
			// 用户回复评论
			confirm() {
				if (!this.reply_data.content) {
					this.$refs.uToast.show({
						type: 'default',
						message: '请输入内容'
					})
					return
				}
				replyComment(this.reply_data).then(res => {
					// console.log(res)
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							message: res.msg
						})
						// 发表评论之后重置评论参数
						this.reply_data.content = ''
						this.reply_data.p_id = ''
						// 更新评论列表
						this.hf_list = []
						this.hf_data.page = 1
						this.get_hf()
						// 更新评论数
						this.list[this.open_pl].hf_nums += 1
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg
						})
					}
				})
			},
			// 用户回复
			user_reply(data, type) {
				console.log(data)
				// if (!this.user_info) {
				// 	this.user_no_login()
				// 	return
				// }
				// if (type == 1) {
				// } else {
				// 	this.reply_data.p_id = data.id
				// }
				this.reply_data.p_id = data.id
				this.placeholder = '回复' + data.username
				// this.comment_show = true
			},
			// 删除评论
			delete_pl(id) {
				uni.showModal({
					title: '提示',
					content: '确认删除该条评论吗？',
					success: (res) => {
						if (res.confirm) {
							delComment({ dl: this.dl_id, comment_id: id }).then(res => {
								if (res.code == 1) {
									this.list = []
									this.query_data.page = 1
									this.get_list()
									this.get_user()
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
								}
							})
						} else if (res.cancel) {}
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 30rpx;

		.top {
			padding: 30rpx;
			background-color: #FFFFFF;

			.msg {
				margin-left: 20rpx;

				.name {
					font-weight: 400;
					font-size: 40rpx;
					color: #232323;
				}

				.num {
					margin-top: 15rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

		.item {
			margin-top: 30rpx;
			background-color: #FFFFFF;
			padding: 30rpx;

			.user {
				.left {
					.name {
						margin-left: 15rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;

						.text {
							margin-bottom: 10rpx;
						}
					}
				}

				.right {
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
			}

			.sp_msg {
				margin-top: 20rpx;

				image {
					width: 134rpx;
					height: 122rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.sp_detail {
					flex: 1;
					margin-left: 20rpx;

					.left {
						.sp_title {
							// flex: 1;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
						}

						.sp_gg {
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
						}
					}

					.right {
						margin-left: 20rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;

						.num {
							margin-top: 10rpx;
							align-self: flex-end;
						}
					}
				}
			}

			.pl_text {
				margin-top: 30rpx;
				color: #666666;
				font-weight: 400;
				font-size: 24rpx;

				.pl_title {
					color: #3D3D3D;

				}
			}

			.btn {
				margin-top: 40rpx;

				.left {
					image {
						width: 38rpx;
						height: 38rpx;
					}

					.num {
						font-weight: 400;
						font-size: 24rpx;
						color: #232323;
						margin-left: 10rpx;
					}
				}

				.right {
					padding: 6rpx 22rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 2rpx solid #FF6262;
					font-weight: 400;
					font-size: 28rpx;
					color: #FF6262;
				}
			}
		}

		.comment_box {
			width: 100%;
			height: 696rpx;
			padding: 56rpx 36rpx;
			padding-bottom: 0rpx;
			box-sizing: border-box;
		}

		.bottom {
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			// padding-bottom: calc(20rpx + env(safe-area-inset-bottom) /2);

			.ipt_box {
				padding: 8rpx 20rpx;
				width: 616rpx;
				height: 54rpx;
				background: #F8F9FC;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				box-sizing: border-box;

				.img {
					width: 26rpx;
					height: 22rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>